<template>
  <div id="main">
    <div class="table-container">
      <list-table-new ref="listTable" v-bind="tableSetting"></list-table-new>
    </div>
    <dialogPublic
      width="1000px"
      title="新建"
      :show.sync="showDialog"
      v-if="showDialog"
      @doSubmit="doSubmit"
      @doClose="() => (showDialog = false)"
    >
      <editForm
        class="form"
        :formConfig="basicConfig"
        ref="basicForm"
        :formData="basicFormData"
      ></editForm>
    </dialogPublic>
    <dialogPublic
      title="新建"
      :show.sync="showProcessDialog"
      v-if="showProcessDialog"
      @doSubmit="dialogSubmit"
      @doClose="() => (showProcessDialog = false)"
      fullscreen
    >
      <list-table-new
        v-bind="processTableSetting"
        ref="processTableRef"
      ></list-table-new>
    </dialogPublic>
  </div>
</template>
<script>
import {
  addOrSaveInfo,
  queryList,
  getHref,
  getSetCodes,
  getProcessCodes,
  copyWorkflow,
} from "@/api/businessConfigurationManagement/processConfiguration.js";

import { applicationQueryList } from "@/api/systemManagement/applicationManagement.js";

export default {
  data() {
    return {
      sort: [],
      processCode: "",
      showProcessDialog: false, // 复制流程弹框
      processCodeList: [],
      showDialog: false, // 弹框显示
      // 表格数据配置
      tableSetting: {
        showIndex: true, // 序号显示
        selectionShow: false, // 多选显示
        showFilterBtn: false, // 过滤器显示
        showCustomBtn: false, // 自定义列显示
        // 搜索框设置
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
            this.tableSetting.searchObj.queryData = params;
            this.sort = sortStr;
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "input",
              label: "模板名称",
              model: "processName",
              placeholder: "请输入",
            },
            {
              type: "input",
              label: "模板编号",
              model: "processCode",
              placeholder: "请输入",
            },
            {
              type: "select",
              label: "模板组编号",
              model: "setCode",
              option: [],
            },
            {
              type: "select",
              label: "所属业务模块",
              model: "moduleCode",
              option: [],
            },
          ],
        },
        // 按钮
        actionList: [
          {
            name: "复制流程",
            icon: "icon-daoru",
            isHide: !this.$store.getters.isBtnAuth("copyProcess"),
            method: () => {
              this.processCode = "";
              this.getTable({
                page: 1,
                pageSize: 15,
              });
              this.showProcessDialog = true;
            },
          },
          {
            name: "新建",
            icon: "icon-xinjian",
            disabled: !this.$store.getters.isBtnAuth("add"),
            content: "未授权的功能",
            method: () => {
              this.basicConfig.itemArr[2].selectOption = [];
              this.$set(this.basicFormData, "setCode", "");
              this.$set(this.basicFormData, "moduleCode", "");
              this.$set(this.basicFormData, "processCode", "");
              this.$set(this.basicFormData, "processName", "");
              this.showDialog = true;
            },
          },
          {
            name: "流程运维平台",
            disabled: !this.$store.getters.isBtnAuth("processPlatform"),
            content: "未授权的功能",
            method: () => {
              this.goHref();
            },
          },
        ],
        tableMethods: {
          //点击行的方法
          rowClick: (val) => {
            this.gotoDetails(val.id);
          },
        },
        // 表头
        column: [
          {
            label: "模板名称",
            prop: "processName",
            sortable: true,
          },
          {
            label: "模板编号",
            prop: "processCode",
            sortable: true,
          },
          {
            label: "模板组编号",
            prop: "setCode",
            sortable: true,
          },
          {
            label: "回调接口（中缀）",
            prop: "callbackController",
            sortable: true,
          },
          {
            label: "所属业务模块",
            prop: "moduleCode",
            sortable: true,
          },
        ],
      },
      // 弹框信息表单
      basicConfig: {
        labelWidth: "140px",
        itemArr: [
          {
            label: "模板组编号",
            prop: "setCode",
            type: "select",
            required: true,
            span: 12,
            selectOption: [],
            methods: (val) => {
              this.getProcessCodeList(val.id);
              this.$set(this.basicFormData, "setCode", val.value || "");
              this.$set(this.basicFormData, "moduleCode", val.moduleCode || "");
              this.$set(this.basicFormData, "processCode", "");
              this.$set(this.basicFormData, "processName", "");
            },
          },
          {
            label: "所属业务模块",
            prop: "moduleCode",
            type: "text",
            span: 12,
            placeholder: "请输入",
          },
          {
            label: "模板编号",
            prop: "processCode",
            type: "select",
            required: true,
            span: 12,
            selectOption: [],
            methods: (val) => {
              this.$set(this.basicFormData, "processCode", val.value || "");
              this.$set(
                this.basicFormData,
                "processName",
                val.processName || ""
              );
            },
          },
          {
            label: "模板名称",
            prop: "processName",
            type: "text",
            required: true,
            span: 12,
            placeholder: "请输入",
          },
          {
            label: "回调接口（中缀）",
            prop: "callbackController",
            type: "text",
            required: true,
            span: 12,
            placeholder: "请输入callbackController",
          },
          {
            label: "应用编号",
            prop: "appCode",
            type: "text",
            span: 12,
            disabled: true,
            placeholder: "请输入appCode",
          },
        ],
      },
      // 弹框数据
      basicFormData: {},
      // 复制流程弹框表格
      processTableSetting: {
        radioShow: true,
        showFilterBtn: false, // 显示过滤器
        showCustomBtn: false, // 显示自定义列
        // 搜索框
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTable(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "input",
              label: "应用名称",
              model: "name",
              placeholder: "请输入",
            },
            {
              type: "select",
              label: "状态",
              model: "status",
              placeholder: "请选择",
              option: [
                { label: "启用", value: 1 },
                { label: "停用", value: 0 },
              ],
            },
          ],
        },
        // 表头
        column: [
          {
            label: "应用名称",
            textAlign: "center",
            prop: "name",
          },
          {
            label: "数据源标识",
            textAlign: "center",
            prop: "mark",
          },
          {
            label: "集团组织",
            textAlign: "center",
            prop: "departmentName",
          },
          {
            label: "应用类型",
            textAlign: "center",
            prop: "type",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "system_app_type",
                row.type
              );
            },
          },
          {
            label: "签名方式",
            textAlign: "center",
            prop: "sign",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "system_sign",
                row.sign
              );
            },
          },
          {
            label: "应用状态",
            textAlign: "center",
            prop: "status",
            formatter: (row) => {
              return row.status === 1 ? "启用" : "停用";
            },
          },
        ],
        // 表格方法
        tableMethods: {
          //点击行的方法
          rowClick: async (val) => {
            this.$refs.processTableRef.radioSelect(val);
          },
        },
      },
    };
  },
  created() {
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
    this.getAppCode();
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.$refs.listTable.getTableConfig();
    this.updateData();
  },
  methods: {
    //获取应用编号
    async getAppCode() {
      let info = this.$store.getters.currentAppInfo.appCode;
      this.basicFormData = { appCode: info };
      let { data } = await getSetCodes(info);
      let setCodeList = [];
      let setCodeNameList = [];
      data.forEach((item) => {
        let obj = {
          label: item.setCode || "",
          value: item.setCode || "",
          id: item.id || "",
          moduleCode: item.moduleCode || "",
        };
        let nameObj = {
          label: item.moduleCode || "",
          value: item.moduleCode || "",
        };
        setCodeList.push(obj);
        setCodeNameList.push(nameObj);
      });
      this.basicConfig.itemArr[0].selectOption = setCodeList;
      this.tableSetting.searchObj.searchArr[2].option = setCodeList;
      this.tableSetting.searchObj.searchArr[3].option = setCodeNameList;
    },
    async getProcessCodeList(id) {
      let { data } = await getProcessCodes(id);
      let setCodeList = [];
      data.forEach((item) => {
        let obj = {
          label: item.processCode || "",
          value: item.processCode || "",
          processName: item.processName || "",
        };
        setCodeList.push(obj);
      });
      this.basicConfig.itemArr[2].selectOption = setCodeList;
    },
    // 新增弹框确定按钮
    async doSubmit() {
      let data = await this.$refs.basicForm.getFormData();
      await addOrSaveInfo(data).then((res) => {
        if (res.code == 200) {
          // this.$message.success(res.description);
          this.$message.success("保存成功！");
          this.$refs.listTable.searchData();
          this.showDialog = false;
          this.gotoDetails(res.data);
        }
      });
    },
    // 流程运维平台
    async goHref() {
      let { data } = await getHref();
      window.open(data, "_blank");
    },
    // 获取表格数据
    async getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      let { data } = await queryList(queryData);
      this.$set(this.tableSetting, "tableData", data.list || []);
      this.$set(this.tableSetting, "totalNumber", data.total || 0);
    },
    // 详情页面
    gotoDetails(id) {
      let { href } = this.$router.resolve({
        name: "processConfigurationDetails",
        query: {
          id: id || "",
        },
      });
      window.open(href, "_blank");
    },
    //更新列表页的数据
    updateData() {
      this.$refs.listTable.searchData();
    },
    // 查询表格数据
    async getTable(params, sortStr) {
      let queryData = Object.assign({}, params);
      applicationQueryList(queryData)
        .then((list) => {
          this.$set(this.processTableSetting, "tableData", list.data);
          this.$set(this.processTableSetting, "totalNumber", list.total);
        })
        .catch((e) => {
          this.$set(this.processTableSetting, "tableData", []);
          this.$set(this.processTableSetting, "totalNumber", 0);
        });
    },
    dialogSubmit() {
      let val = this.$refs.processTableRef.getRadioData();
      this.processCode = val ? val.code : "";
      if (!this.processCode) {
        this.$message.warning("请选择一行数据！");
      } else {
        this.showProcessDialog = false;
        copyWorkflow(this.processCode).then((res) => {
          if (res.code == 200) {
            this.$message.success("复制流程成功！");
            this.getTableData(this.tableSetting.searchObj.queryData, this.sort);
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
  display: flex;
  .table-container {
    width: 100%;
    height: calc(100% - 10px);
    padding: 20px;
    /deep/ .kr-list-table-box .kr-table-pagination {
      padding-top: 0;
    }
  }
  .form {
    margin: 0 auto;
    padding: 25px 25px 35px 5px;
  }
}
</style>